<template>
    <div>
        <div class="left">
            <el-menu
                    :default-active="active"
                    router
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item :index="item.path" v-for="item in navs">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right">
            <router-view/>
        </div>
    </div>
</template>

<script>
  export default {
    created() {
      this.active = window.location.href.split('#')[1]
    },
    data() {
      return {
        active: '/home',
        navs: [
          {
            path: '/home',
            icon: 'el-icon-menu',
            name: '首页'
          },
          {
            path: '/goodsInput',
            icon: 'el-icon-menu',
            name: '商品录入'
          }
        ]
      }
    }
  }
</script>

<style lang="less">
    .left {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
        height: 100vh;
        background-color: #545c64;
        width: 130px;

        .el-menu {
            width: 130px;
        }
    }

    .right {
        padding-left: 135px;
    }
</style>
